<template>
  <div class="top-mid">

    <div class="item" v-for="item in  dataset" :key="item.name">

      <span class="name">
        {{item.name}}
        <strong>{{item.value}}</strong>
      </span>

      <span class="huanbi ">
        环比
        <strong :data-state="item.huanbi>0 ? 'up':'down'">
          <em>
            {{item.huanbi}}%
          </em>
        </strong>
      </span>

    </div>

  </div>
</template>

<script>
import axios from "axios"
export default {
  data() {
    return {
      dataset: []
    }
  },
  created() {
    axios.get("/api/alarm/top").then(result => {
      this.dataset = result.data.list
    })
  }
}
</script>

<style lang="scss" scoped>
.top-mid {
  width: 1650px;
  position: absolute;
  color: white;
  top: 30px;
  left: 1000px;
  display: flex;
  .item {
    flex: 1;
  }
  .name {
    font-size: 40px;
    strong {
      font-weight: 300;
      color: orange;
    }
  }
  .huanbi {
    font-size: 30px;
    color: green;
    color: white;
    strong {
      position: relative;
      display: inline-block;
      width: 130px;
      text-align: right;
      color: green;
    }

    strong[data-state="up"] {
      em {
        color: orange;
      }
    }

    strong[data-state]:before {
      content: "";
      position: absolute;
      display: inline-block;
      left: 10px;
      top: 5px;
      width: 30px;
      height: 30px;
    }

    strong[data-state="up"]:before {
      background: url(../assets/images/common/huanbi-up.png) no-repeat;
    }

    strong[data-state="down"]:before {
      background: url(../assets/images/common/huanbi-down.png) no-repeat;
    }
  }
}
</style>